<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_商品列表练习</title>
</head>
<body>
    <table border="1px">
        <tr>
            <th>商品名称<</th>
            <th>商品价格</th>
            <th>商品库存</th>
        </tr>
    </table>
    <script>
        let productArr=[
            {title:'小米手机',price:'5000',num:'100'},
            {title:'华为手机',price:'6000',num:'200'},
            {title:'苹果手机',price:'7000',num:'300'},
            {title:'三星手机',price:'8000',num:'400'},
            {title:'OPPO手机',price:'9000',num:'500'}
        ]
        let tableE=document.querySelector('table');
        for(let i=0;i<productArr.length;i++){
            let tr=document.createElement('tr');
            let td1=document.createElement('td');
            let td2=document.createElement('td');
            let td3=document.createElement('td');
            td1.innerHTML=productArr[i].title;
            td2.innerHTML=productArr[i].price;
            td3.innerHTML=productArr[i].num;
            tr.append(td1,td2,td3);
            tableE.append(tr);
        }
    </script>
</body>
</html>